// CD/歌词页切换逻辑

import { ref } from 'vue';

export default function useMiddleInteractive() {
  // 当前展示的视图层
  const currentShow = ref('cd');
  // CD页样式
  const middleLStyle = ref(null);
  // 歌词页样式
  const middleRStyle = ref(null);
  // 当前展示页面
  // 区别于currentShow: currentShow是在拖动过程中实时变化的,currentView则是手指离开屏幕之后的展示页面
  let currentView = 'cd';

  const touch = {};

  // 需要根据当前视图去判断,如果当前是CD,初始的位移为0,如果当前是歌词页,位移就是一个屏幕的宽度

  // 触摸开始
  function onMiddleTouchStart(e) {
    console.log(e.touches[0].pageX, '开始');
    // 获取手指按下初始x轴坐标
    touch.startX = e.touches[0].pageX;
    touch.startY = e.touches[0].pageY;
    // 定义方向锁
    touch.directionLocked = '';
  }

  // 触摸(滑动)过程中
  function onMiddleTouchMove(e) {
    console.log(e.touches[0].pageX, '拖动');
    // 手指位移的距离
    // 获取手指移动偏移量 = 手指触点X轴坐标 - 手指按下初始坐标
    const deltaX = e.touches[0].pageX - touch.startX;
    const deltaY = e.touches[0].pageY - touch.startY;
    const absDeltaX = Math.abs(deltaX);
    const absDeltaY = Math.abs(deltaY);

    // 第一次没有方向锁的时候设置方向锁(水平or垂直)
    if (!touch.directionLocked) {
      // 方向的设定取决于横纵坐标大小
      touch.directionLocked = absDeltaX >= absDeltaY ? 'h' : 'v';
    }

    if (touch.directionLocked === 'v') {
      // 纵向偏移
      return;
    }

    // 滑动初始值
    // 如果currentView是cd,则需要向左划0,否则需要想走滑动一个屏幕的宽度
    const left = currentView === 'cd' ? 0 : -window.innerWidth;
    console.log('滑动距离 + left', deltaX + left);
    console.log('滑动距离', deltaX);
    // 歌词视图层偏移量
    // 偏移长度(因为可以滑动很长的距离,所以要限制偏移长度,在0 - -window.innerWidth之间)
    const offsetWidth = Math.min(0, Math.max(-window.innerWidth, deltaX + left));
    console.log(offsetWidth, 'offsetWidth');
    console.log(left, 'left');
    // 计算偏移比例
    touch.percent = Math.abs(offsetWidth / window.innerWidth);
    console.log('滑动比例', touch.percent);

    if (currentView === 'cd') {
      // 向左滑
      // 如果滑动比例超过20%,当前展示页变为lyric
      if (touch.percent > 0.2) {
        currentShow.value = 'lyric';
      } else {
        currentShow.value = 'cd';
      }
    } else {
      // 向右滑
      if (touch.percent > 0.2) {
        currentShow.value = 'cd';
      } else {
        currentShow.value = 'lyric';
      }
    }
    // 修改样式
    middleLStyle.value = {
      opacity: 1 - touch.percent,
      TransitionDuration: '0ms'
    };
    middleRStyle.value = {
      transform: `translate3d(${offsetWidth}px, 0, 0)`,
      TransitionDuration: '0ms'
    };
  }

  // 触摸结束
  function onMiddleTouchEnd(e) {
    touch.percent = 0;
    console.log(e, '结束');
    let offsetWidth;
    let opacity;
    if (currentShow.value === 'cd') {
      currentView = 'cd';
      offsetWidth = 0;
      opacity = 1;
    } else {
      currentView = 'lyric';
      offsetWidth = -window.innerWidth;
      opacity = 0;
    }
    // 动画
    const duration = 300;
    // 修改样式
    middleLStyle.value = {
      opacity,
      TransitionDuration: `${duration}ms`
    };
    middleRStyle.value = {
      transform: `translate3d(${offsetWidth}px, 0, 0)`,
      TransitionDuration: `${duration}ms`
    };
  }

  return {
    currentShow,
    middleRStyle,
    middleLStyle,
    onMiddleTouchEnd,
    onMiddleTouchMove,
    onMiddleTouchStart
  };
}
